<template>
    <div>购物车商品列表</div>
    <ul>
        <li>
            <span>商品序号</span>
            <span>商品名称</span>
            <span>商品单价</span>
            <span>商品图片</span>
            <span>商品数量</span>
            <span>删除商品</span>
        </li>
        <li v-for="item in cart" :key="item.id">
            <span>{{ item.id }}</span>
            <span>{{ item.title }}</span>
            <span>{{ item.price }}</span>
            <span><img :src="item.src" alt=""></span>
            <button @click="remove(item,id)" class="scsp">删除商品</button>
        </li>
    </ul>
    <div>
        总金额：{{ total }},总数量：{{ count }}。<button @click="gotoProduct">我还要买</button>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useStore } from '../store';
import { useRouter } from 'vue-router';
const store=useStore()
const router=useRouter()
const {cart, total, count}=storeToRefs(store)
const remove=id=>{store.removeProduct(id)}
const gotoProduct=()=>{
    router.push({name:'products'
    })
}
</script>

<style scoped>
.scsp{
    width: 100px;
    height: 40px;
}
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

li img {
    width: 60px;
}

span {
    flex: 1;
    text-align: center;
    line-height: 60px;
}
</style>